<template>
  <PageWrapper :class="prefixCls" :title="title">
    <template #headerContent>
      <!--      基于Vue Next, TypeScript, Ant Design Vue实现的一套完整的企业级后台管理系统。-->
      <!--      <div :class="`${prefixCls}__link`">-->
      <!--        <a><Icon icon="bx:bx-paper-plane" color="#1890ff" /><span>开始</span></a>-->
      <!--        <a><Icon icon="carbon:warning" color="#1890ff" /><span>简介</span></a>-->
      <!--        <a><Icon icon="ion:document-text-outline" color="#1890ff" /><span>文档</span></a>-->
      <!--      </div>-->
    </template>

    <div :class="`${prefixCls}__content`">
      <a-list :data-source="cardData" :pagination="pagination" :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3, xxxl: 2 }">
        <template #renderItem="{ item }">
          <a-list-item @click="handleClick(item)">
            <a-card :hoverable="true" :class="`${prefixCls}__card`">
              <div :class="`${prefixCls}__card-title`">
                <Icon class="icon" v-if="item.icon" :icon="item.icon" :color="item.color" />
                {{ item.name }}
              </div>
              <div :class="`${prefixCls}__card-detail`">
                <span>state:{{ item.active }}</span>
              </div>
            </a-card>
          </a-list-item>
        </template>
      </a-list>
    </div>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, ref, onMounted } from 'vue';
  import Icon from '/@/components/Icon/index';
  import { PageWrapper } from '/@/components/Page';
  import { Card, Row, Col, List, message } from 'ant-design-vue';
  import { useRoute } from 'vue-router';
  import { defHttp } from '@/utils/http/axios';
  import { useRouter } from 'vue-router';
  export default defineComponent({
    components: {
      Icon,
      PageWrapper,
      [Card.name]: Card,
      [List.name]: List,
      [List.Item.name]: List.Item,
      [Row.name]: Row,
      [Col.name]: Col,
    },
    setup() {
      // 路由
      const router = useRouter();

      const title = ref('');
      // 账号的id
      const {
        query: { id: id, name: name },
      } = useRoute();
      title.value = name;
      onMounted(() => {
        // 当页面加载完成后执行这里的代码
        pageList({ pageSize: 12, pageNo: 1 });
      });

      const cardData = ref([]);
      const pagination = {
        total: 0,
        showQuickJumper: true,
        onChange: (page: number) => {
          pageList({ pageSize: 12, pageNo: page });
        },
        pageSize: 12,
      };
      function handleClick(item) {
        // 这里是你处理点击事件的代码
        console.log(item);
        if (!item.active) {
          message.warn('设备未激活，没有数据');
          return;
        }
        router.push({
          path: '/thingsuser/deviceData',
          query: { id: id, deviceId: item.id.id },
        });
      }

      function pageList(page) {
        defHttp.get({ url: '/thingsUserDevice/list', params: Object.assign(page, { id: id }) }).then((res) => {
          console.log(res);
          cardData.value = res.data;
          pagination.total = res.totalElements;
          console.log(cardData.value);
        });
      }
      return {
        prefixCls: 'list-card',
        title,
        cardData,
        pagination,
        handleClick,
      };
    },
  });
</script>
<style lang="less" scoped>
  .list-card {
    &__link {
      margin-top: 10px;
      font-size: 14px;

      a {
        margin-right: 30px;
      }

      span {
        margin-left: 5px;
      }
    }

    &__card {
      width: 100%;
      margin-bottom: -8px;

      .ant-card-body {
        padding: 16px;
      }

      &-title {
        margin-bottom: 5px;
        font-size: 16px;
        font-weight: 500;
        color: @text-color;

        .icon {
          margin-top: -5px;
          margin-right: 10px;
          font-size: 38px !important;
        }
      }

      &-detail {
        padding-top: 10px;
        padding-left: 30px;
        font-size: 14px;
        color: @text-color-secondary;
      }
    }
  }
</style>
